<script setup>



const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  keyName: {
    type: String,
    default: "Key",
  },
  valueName: {
    type: String,
    default: "Value",
  },
  valueInputType: {
    type: String,
    default: "text",
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})
// 添加table行的方法
const addTableRow = ()=>{
  const newRow={
    key: "",
    value: ""
  }
  // 在列表后面添加数据
  // 在列表前面添加数据
  props.list.unshift(newRow)
}
// 删除table行的方法
const deleteTableRow =(index)=>{
  props.list.splice(index,1)
}
</script>

<template>
  <el-table border :data="props.list" style="width: 100%" height="400px">
    <el-table-column align="center"  prop="key" :label="props.keyName" >
      <template #default="scope">
        <el-input :readonly="props.readonly" v-model="scope.row.key" placeholder="请输入key" />
      </template>
    </el-table-column>
    <el-table-column align="center"  prop="value" :label="props.valueName" >
      <template #default="scope">
        <el-input  :readonly="props.readonly"  v-model="scope.row.value"  :type="props.valueInputType"  placeholder="请输入value" />
      </template>
    </el-table-column>
    <el-table-column align="center"  fixed="right" width="140px"  >
      <template #header>
        <el-button :disabled="props.readonly"  link type="primary" @click="addTableRow()">添加</el-button>
      </template>
      <template #default="scope">
        <el-button :disabled="props.readonly" link type="warning" @click="deleteTableRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>